import type { FC } from 'react';
import AntDesign from '@expo/vector-icons/AntDesign';
import { Button } from '@/components';
import { primaryColor } from '@/constants/Colors';
import styles from './styles';

type followBtnProps = {
  ghost?: boolean;
  followed?: boolean;
  onFollowPress?: () => void;
}

const followBtn: FC<followBtnProps> = (props) => {
  const {
    ghost = true,
    followed = false
  } = props;

  const title = followed ? 'Following' : 'Follow';

  const icon = followed ? null : (
    <AntDesign
      name="plus"
      size={14}
      color={ghost ? primaryColor : '#fff'}
    />
  );

  return (
    <Button
      ghost={ghost}
      size="mini"
      icon={icon}
      title={title}
      style={styles.followBtn}
      onPress={props.onFollowPress}
      innerStyle={styles.followBtnInner}
      type={followed ? 'default' : 'primary'}
      textStyle={followed ?
        styles.followedBtnText :
        styles.followBtnText
      }
    />
  );
}

export default followBtn;